import React from 'react';
import { Modal, Row, Col, Button, Tooltip } from 'antd';
import './style.scss';
import { DashboardOutlined, PoweroffOutlined } from '@ant-design/icons';
import TotalNums from './components/TotalNums';
// 地图组件
import NowTime from './components/NowTime';
import AreaMap from './components/AreaMap';
import ChartPie from './components/ChartPie';
import ChartLine from './components/ChartLine';

interface IProp {}

interface IState {
  modalVisible: boolean;
  timer: number;
}

class DataStatistics extends React.PureComponent<IProp, IState> {
  timeInterval: any; // 定时器，计时判断是否为更新的时间点
  constructor(prop: IProp) {
    super(prop);
    this.state = {
      modalVisible: false, // todo:页面完成，需改为false;方便调试，临时改为true
      timer: 0,
    };
  }

  componentDidMount() {}
  componentWillUnmount = () => {
    this.setState = (state, callback) => {
      return;
    };
  };
  /**
   * 计时器：每天24点更新一次数据
   */
  tick() {
    this.setState({
      timer: this.state.timer + 1,
    });
  }
  /**
   * 切换全屏
   */
  openFullScreen = () => {
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    }
  };
  /**
   * 退出全屏
   */
  exitFullScreen = () => {
    if (document.fullscreenElement) {
      document.exitFullscreen();
    }
  };
  /**
   * 打开弹窗
   */
  public openModel() {
    // note:便于调试，开发完打开注释
    this.openFullScreen();
    this.setState({
      modalVisible: true,
      timer: 0,
    });
    this.startTimeCount();
  }
  /**
   * 开启计时
   */
  private startTimeCount() {
    let leftSeconds: number;
    // 设定固定时间点刷新
    const nowDate: any = new Date();
    console.log('&&&&😊 当前时间:', nowDate, '**********************--开启【60秒】倒计时--');
    // 次日0点更新-暂时无用
    // let endDate: any = new Date(
    //   nowDate.getFullYear(),
    //   nowDate.getMonth(),
    //   nowDate.getDate() + 1
    // );
    // leftSeconds = Math.floor((endDate - nowDate) / 1000);
    // console.log("弹窗数据--更新时间-设定:", endDate);
    leftSeconds = 60; // 固定：60秒倒计时

    // 开启计时器
    this.timeInterval = setInterval(() => {
      leftSeconds--;
      if (leftSeconds < 10) {
        console.log('&&&&😊 距离更新-倒计时--：', leftSeconds);
      }
      if (leftSeconds <= 0) {
        // 倒计时为0，次日0点到了，自动更新页面数据。
        this.tick();
        clearInterval(this.timeInterval);
        // 开启新计时器
        this.startTimeCount();
      }
    }, 1000);
  }
  /**
   * 关闭弹窗
   */
  private closeModel() {
    clearInterval(this.timeInterval);
    this.setState({
      modalVisible: false,
    });
    // note:便于调试，开发完打开注释
    this.exitFullScreen();
  }

  render() {
    const { modalVisible, timer } = this.state;
    // console.log("--运营数据--statictics弹窗-render", modalVisible, timer);
    return (
      <div className="layout-header-statictics">
        <Tooltip title="运营数据">
          <Button
            className="statictics-btn"
            type="primary"
            shape="circle"
            icon={<DashboardOutlined />}
            onClick={() => {
              if (modalVisible) {
                this.closeModel();
              } else {
                this.openModel();
              }
            }}
          />
        </Tooltip>
        {/* modalVisible变化，弹窗重新渲染 */}
        <Modal
          className="statictics-wrapper"
          title={null}
          width="max-content"
          visible={modalVisible}
          keyboard={false}
          closable={false}
          footer={null}
        >
          <Tooltip title="退出全屏">
            <Button
              className="close-btn"
              type="link"
              shape="circle"
              icon={<PoweroffOutlined />}
              onClick={() => {
                this.closeModel();
              }}
            />
          </Tooltip>
          <NowTime visible={modalVisible} />
          <div className="page-title">
            <span className="inner">运营数据统计</span>
          </div>
          <Row className="row1">
            <Col span={24}>
              <div className="page-box box-realtime">
                <div className="tit">今日实时数据</div>
                <div className="ctn">
                  <TotalNums visible={modalVisible}></TotalNums>
                </div>
              </div>
            </Col>
          </Row>
          <Row className="row2">
            <Col span={12}>
              <div className="page-box chart-pie-box">
                <div className="tit">企业行业分布</div>
                <div className="chart-area">
                  {modalVisible && <ChartPie timer={timer}></ChartPie>}
                </div>
              </div>
            </Col>
            <Col span={12}>
              <div className="page-box chart-map-box">
                <div className="tit">区域分布</div>
                <div className="chart-area">{modalVisible && <AreaMap key={timer}></AreaMap>}</div>
              </div>
            </Col>
          </Row>
          <Row className="row3">
            <Col span={12}>
              <div className="page-box chart-line-box">
                <div className="tit">通话量统计</div>
                <div className="chart-area">
                  {modalVisible && (
                    <ChartLine timer={timer} type="callnumber" yAxisAlias="通话量"></ChartLine>
                  )}
                </div>
              </div>
            </Col>
            <Col span={12}>
              <div className="page-box chart-line-box">
                <div className="tit">通话时长统计</div>
                <div className="chart-area">
                  {modalVisible && (
                    <ChartLine
                      timer={timer}
                      type="callduration"
                      yAxisAlias="通话时长"
                      precision={1}
                    ></ChartLine>
                  )}
                </div>
              </div>
            </Col>
          </Row>
        </Modal>
      </div>
    );
  }
}
export default DataStatistics;
